/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TabBarIOS
} from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

var base64Icon = '';

var imoocApp = React.createClass({
  statics: {
    title: '<TabBarIOS>',
    description: 'Tab-based navigation.',
  },

  displayName: 'TabBarExample',

  getInitialState: function() {
    return {
      selectedTab: 'redTab',
      notifCount: 0,
      presses: 0,
    };
  },

  _renderContent: function(color: string, pageText: string, num?: number) {
  return (
    <View style={[styles.tabContent, {backgroundColor: color}]}>
      <Text style={styles.tabText}>{pageText}</Text>
      <Text style={styles.tabText}>{num} re-renders of the {pageText}</Text>
    </View>
  );
},

render: function() {
  return (
    <TabBarIOS
      unselectedTintColor="yellow"
      tintColor="ion-ios-videocam-outline"
      barTintColor="darkslateblue">
      <TabBarIOS.Item
        title="Blue Tab"
        icon={{uri: base64Icon, scale: 3}}
        selected={this.state.selectedTab === 'blueTab'}
        onPress={() => {
          this.setState({
            selectedTab: 'blueTab',
          });
        }}>
        {this._renderContent('#414A8C', 'Blue Tab')}
      </TabBarIOS.Item>
      <TabBarIOS.Item
        systemIcon="history"
        badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
        selected={this.state.selectedTab === 'redTab'}
        onPress={() => {
          this.setState({
            selectedTab: 'redTab',
            notifCount: this.state.notifCount + 1,
          });
        }}>
        {this._renderContent('#783E33', 'Red Tab', this.state.notifCount)}
      </TabBarIOS.Item>
      <TabBarIOS.Item
        icon='ion-ios-videocam-outline'
        selectedIcon='ion-ios-videocam-outline'
        renderAsOriginal
        title="More"
        selected={this.state.selectedTab === 'greenTab'}
        onPress={() => {
          this.setState({
            selectedTab: 'greenTab',
            presses: this.state.presses + 1
          });
        }}>
        {this._renderContent('#21551C', 'Green Tab', this.state.presses)}
      </TabBarIOS.Item>
    </TabBarIOS>
  );
},

});

var styles = StyleSheet.create({
  tabContent: {
    flex: 1,
    alignItems: 'center',
  },
  tabText: {
    color: 'white',
    margin: 50,
  },
});

module.exports = imoocApp;

AppRegistry.registerComponent('imoocApp', () => imoocApp);
